<template>
    <div class="login-box">
        <div class="login">
            <div class="title">商品管理系统</div>
            <el-form ref="ruleFormRef" :model="loginFrom" status-icon :rules="rules" class="demo-ruleForm">
                <!-- 帐号 -->
                <div class="textField">
                    <el-form-item prop="username">
                        <el-icon size="20px">
                            <Avatar />
                        </el-icon>
                        <el-input v-model="loginFrom.username" type="text" autocomplete="off" placeholder="请输入帐号" />
                    </el-form-item>
                </div>
                <!-- 密码 -->
                <div class="textField">
                    <el-form-item prop="pwd">
                        <el-icon size="20px">
                            <Lock />
                        </el-icon>
                        <el-input v-model="loginFrom.pwd" type="password" autocomplete="off" placeholder="请输入密码" />
                    </el-form-item>
                </div>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="loginFn(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { loginAPI, getAdminInfoAPI } from '../../request/api'
import Cookies from 'js-cookie'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router'

let store = useStore()
let router = useRouter()

// 获取form表单
let ruleFormRef = ref()
// 帐号和密码的响应数据 和  帐号和密码验的prop
let loginFrom = reactive({
    username: 'admin',
    pwd: '123456'
})

// 表单验证方法集合
let rules = reactive({
    username: [{ validator: valiUserName, trigger: 'blusr' }],
    pwd: [{ validator: valiPwd, trigger: 'blusr' }]
})
// 帐号验证方法
function valiUserName(rulle: unknown, value: string | undefined, cb: (n?: string) => void) {
    if (value) {
        cb()
    } else {
        cb('用户名不能为空')
    }
}
// 密码验证方法
function valiPwd(rulle: unknown, value: string | undefined, cb: (n?: string) => void) {
    if (value) {
        cb()
    } else {
        cb('密码不能为空')
    }
}

// 登录访求
function loginFn(formVal: FormInstance) {
    formVal.validate().then(async () => {
        //! 获取帐号密码
        let res = await loginAPI({
            username: loginFrom.username,
            password: loginFrom.pwd,
        })
        const { token, tokenHead } = res.data;
        // 存储 coken 在 cookies
        Cookies.set('token', tokenHead + token)
        // // 获取用户信息
        // let adminInfo = await getAdminInfoAPI()
        // //  存储用户信息
        // store.commit('user/upDatePre', adminInfo.data.menus)

        // 路径跳转
        router.push('/index')
        // 提示用户
        ElMessage.success(`${res.message}`)
    })
}

</script>
<style lang = "less" scoped>
.login-box {
    height: 100vh;
    width: 100vw;
    background-color: #2d3a4b;

    .login {
        width: 420px;
        height: 250px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;

        .title {
            color: white;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            padding-bottom: 20px;
        }

        .textField {
            border: 1px solid #3e4957;
            border-radius: 3px;
            height: 50px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            background-color: #283443;
        }
    }
}


:deep(.el-icon) {
    color: #454545;
    padding-left: 12px;
}

:deep(.el-form-item) {
    margin-bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;

    .el-form-item__content {
        width: 100%;
        flex-wrap: nowrap;

        // ipput输入框
        .el-input {
            height: 100%;
            width: 100%;

            .el-input__wrapper {
                padding: 0;
                height: 100%;
                outline: 0;
                box-shadow: none;

                .el-input__inner {
                    background-color: #283443;
                    height: 100%;
                    color: white;
                    text-indent: 10px;
                }

                .el-input__suffix {
                    display: none;
                }
            }
        }

        // 按钮 
        .el-button {
            width: 100%;
            height: 40px;

        }
    }
}
</style>